<template>
  <view class="bookSave-page">
    <span class="part-title">账本名称</span>
    <view class="book-name">
      <input
        type="text"
        :value="bookInfo.bookName"
        maxlength="8"
        @input="handleChangeBookName"
      />
      <span>{{ bookInfo.bookName.length }}/8</span>
    </view>
    <span class="part-title">账本设置</span>
    <view class="book-setting">
      <!-- <tb-cell
        label="月起始日"
        :value="`${bookInfo.monthStartDay}日`"
        isLink
      ></tb-cell> -->
      <tb-cell label="分类设置" isLink @click="onClickTagSetting"></tb-cell>
    </view>
    <tb-button class="submit-btn" @click="onClickSave">完成</tb-button>
  </view>
</template>
<script lang="ts">
import { book, tag } from '@/type/books'
import Vue from 'vue'
import { mapState } from 'vuex'
export default Vue.extend({
  data() {
    return {
      id: '',
    }
  },
  computed: {
    ...mapState('books', {
      bookInfo: (state: any) => state.bookInfo,
    }),
  },
  methods: {
    getBooksById() {
      this.$api.getBooksByIdApi(null, this.id).then((res: any) => {
        if (res.code === 1) {
          res.data.tagVOList.forEach((tag: tag) => (tag.operateType = 0))
          console.log(res.data)
          this.$store.commit('books/SET_BOOKINFO', this.$cloneDeep(res.data))
          this.$store.commit(
            'books/SET_TAGLIST',
            this.$cloneDeep(res.data.tagVOList)
          )
        }
      })
    },
    onClickTagSetting() {
      uni.navigateTo({ url: '/pages/tag/tagSetting' })
    },
    onClickSave() {
      const params = {
        ...this.bookInfo,
      }
      if (this.id) {
        this.$api.putBooksApi(params).then((res: any) => {
          if (res.code === 1) {
            this.$store.commit('books/CLEAR_BOOKS_STATE')
            uni.switchTab({ url: '/pages/index/index' })
          }
        })
        console.log(this.$store.state)
      } else {
        this.$api.postBooksApi(params).then((res: any) => {
          if (res.code === 1) {
            this.$store.commit('books/CLEAR_BOOKS_STATE')
            uni.switchTab({ url: '/pages/index/index' })
          }
        })
      }
    },
    handleChangeBookName(val: any) {
      this.$store.commit('books/SET_BOOKNAME', val.target.value)
    },
  },
  onLoad(option: any) {
    this.id = option.id
    option.id && this.getBooksById()
  },
})
</script>
<style lang="less" scoped>
.bookSave-page {
  padding: 0 48rpx;
  .part-title {
    font-size: 24rpx;
    color: #999;
    margin: 20rpx 0 10rpx;
    display: inline-block;
  }
  .book-name {
    background: #fff;
    width: 100%;
    border-radius: 15rpx;
    padding: 20rpx 36rpx;
    box-sizing: border-box;
    color: #333;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    input {
      font-size: 28rpx;
    }
    span {
      font-size: 28rpx;
      color: #a5a5a5;
    }
  }
  .book-setting {
    width: 100%;
    background: #fff;
    border-radius: 15rpx;
  }
  .submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-top: 40rpx;
    width: 100vw;
    border-radius: 0;
  }
}
</style>